<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>客户服务部物料上报系统</title>
    <script src="http://wx.newamstar.com:8078/newstar/public/js/jquery.min.js"></script>
    <script src="http://wx.newamstar.com:8078/newstar/public/js/layui.js"></script>
    <link rel="stylesheet" href="http://wx.newamstar.com:8078/newstar/public/css/layui.css">
    <link rel="stylesheet" href="http://wx.newamstar.com:8078/newstar/public/css/layui.mobile.css">
</head>
<body>
<style>
    *{
        padding: 0;
        margin: 0;

    }
    body,html{
        overflow-y: auto;
    }
    .title p{
        text-align: left;
        /*border: 1px solid black;*/
        text-indent: 0em!important;
    }
</style>
<div style="height: 20px;width: 100%"></div>
{{-- <div style="color: red;text-align: left;" class="title">
 <p style="font-weight: bold;font-size: 15px;">报修注意事项：</p>
 <p style="font-weight: bold;font-size: 14px">设施:</p>
 <p style="color: black">(1)人为损坏设施自行维修或公司维修费用由当事人(宿舍)承担</p>
 <p style="font-weight: bold;font-size: 14px">行为:</p>
 <p style="color: black">(2)人为造成的管道(马桶)堵塞自己疏通</p>
 <p style="font-weight: bold;font-size: 14px">维修:</p>
 <p style="margin-bottom: 10px;color: black">(3)行政部收集后统一择时维修</p>
</div> --}}
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">物料编码:</label>
        <div class="layui-input-block">
            <input type="text" name="wlbm" lay-verify="title" autocomplete="off" placeholder="请输入物料编码" class="layui-input wlbm">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">物料名称:</label>
        <div class="layui-input-block">
            <input type="text" name="wlmc" lay-verify="title" autocomplete="off" placeholder="请输入物料名称" class="layui-input wlmc">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">材质:</label>
        <div class="layui-input-block">
            <input type="text" name="cz" lay-verify="title" autocomplete="off" placeholder="请输入材质" class="layui-input cz">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">体积:</label>
        <div class="layui-input-block">
            <input type="text" name="tj" lay-verify="title"  autocomplete="off" placeholder="请输入体积" class="layui-input tj">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">净重:</label>
        <div class="layui-input-block">
            <input type="text" name="jz" lay-verify="title"  autocomplete="off" placeholder="请输入净重" class="layui-input jz">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用途:</label>
        <div class="layui-input-block">
            <input type="text" name="yt" lay-verify="title"  autocomplete="off" placeholder="请输入用途" class="layui-input yt">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">功能描述:</label>
        <div class="layui-input-block">
            <input type="text" name="gnms" lay-verify="title"  autocomplete="off" placeholder="请输入功能描述" class="layui-input gnms">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片上传:</label>
               <button type="button" class="layui-btn"  id="upload">点击选择附件</button>
    </div>
    <div class="layui-form-item" id="imgList">
        {{-- <div class="layui-upload-list">
            <img class="layui-upload-img upload demo1 d1"  name="pics"  src="" style="width: 100px;height: 100px;">
            <div class="close" style="display: none">X</div>
        </div>
        <div class="layui-upload-list">

            <img class="layui-upload-img upload demo1 d2"  name="pics"  src="" style="width: 100px;height: 100px;">
            <div class="close" style="display: none">X</div>
        </div>
        <div class="layui-upload-list">
            <img class="layui-upload-img upload demo1 d3"  name="pics" src=""  style="width: 100px;height: 100px;">
            <div class="close" style="display: none">X</div>
        </div> --}}
    </div>

    <div class="layui-form-item" style="margin-top: 50px">
        <label class="layui-form-label">操作:</label>
        <button type="button" class="layui-btn" id="savedata">确认上传</button>
        <input type="file" multiple>111
    </div>
</form>

<style>
    *{padding: 0;margin: 0;}
    li{list-style: none}
    p{font-size: 13px;text-indent: 2em;}
    .layui-form-label{width: 50px!important;}
    .layui-input-block{margin-left: 90px!important;}
    .layui-form-item .layui-form-label{overflow: visible!important; }
    .layui-upload-list{float: left;}
    .close{width: 20px;height: 20px;font-size: 30px;}
    .layui-form-label{text-align: left!important;font-weight:bold}
    /*img[src=""],img:not([src]){background-color: white;border: 1px solid }*/
</style>
<script>
    $(function () {
    $("#savedata").on("click",function () {
        let json = getFormJson();
        let wlbm = $(".wlbm").val(),wlmc = $(".wlmc").val(),cz = $(".cz").val(),tj = $(".tj").val(),jz = $(".jz").val(),yt = $(".yt").val(),gnms = $(".gnms").val();
        var imgSrcs=[];
        $('.layui-upload-img').each(function() { // 遍历所有class为upload的img元素  
            var src = $(this).attr('src'); // 获取当前img元素的src属性  
            imgSrcs.push(src); // 将src添加到数组中  
        });  
        json['imgs'] = imgSrcs.toString();

        if(!wlbm){
            layer.msg("物料编码不能为空")
            return false;
        }
        if(!wlmc){
            layer.msg("物料名称不能为空")
            return false;
        }
        if(!cz){
            layer.msg("材质不能为空")
            return false;
        }
        if(!tj){
            layer.msg("体积不能为空")
            return false;
        }
        if(!jz){
            layer.msg("净重不能为空")
            return false;
        }
        if(!yt){
            layer.msg("用途不能为空")
            return false;
        }
        if(JSON.stringify(imgSrcs) === '[]'){
            layer.msg("图片不能为空")
            return false;
        }
        $.ajax({
            url:"http://wx.newamstar.com:8078/newstar/public/saveBpmdata?type=1",//提交数据
            type:"post",
            data:json,
            success:function (res) {
                layer.msg(res.msg, {
                    icon: 1,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                }, function(){
                    //do something
                });
            },
            error:function (error) {
                console.log(error);
            }
        })
    })
    })

    function getFormJson() {
        let o = {};
        let p = {};
        let a = $("form").serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        $(".demo1").each(function (i,e) {
            let s = $(this).attr("src");
            if(!!s){
                i+=1;
                p["pic"+i] = s;
            }
        })
        let empty = {}

        let object = $.extend(empty , o, p);
        return empty;
        //return o;
    }

    $("#imgList").on("click",'.close',function () {
        let _this = $(this);
        layer.confirm('确认移除照片吗？', {
            btn : [ '确定', '取消' ]//按钮
        }, function(index) {
            layer.close(index);
            _this.parent().remove();
            //_this.siblings("img").attr("src",null);
            //_this.hide();
        });
    })

    // $(".close").on("click",function () {
    //     let _this = $(this);
    //     layer.confirm('确认移除照片吗？', {
    //         btn : [ '确定', '取消' ]//按钮
    //     }, function(index) {
    //         layer.close(index);
    //         _this.siblings("img").attr("src",null);
    //         _this.hide();
    //     });
    //     //
    // })

    var imgs = [];
    layui.use(['upload', 'element', 'layer'], function(){
            var $ = layui.jquery
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer;
                upload.render({
                    elem: '#upload'
                    ,url: 'http://wx.newamstar.com:8078/newstar/public/uploadBpmPics' //此处配置你自己的上传接口即可
                    ,accept: 'images'
                    ,acceptMime: 'image/*'
                    ,method: 'post'
                    ,multiple: true
                    ,number: 3
                    ,auto: true
                    // ,number: 10
                    ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        //$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                    });
                    }
                    ,done: function(res){
                        //上传完毕
                        var url = res.msg;
                        imgs.push(url);
                        $('#imgList').append(`<div class="layui-upload-list"><img class="layui-upload-img upload demo1 d1"  name="pics"  src="http://wx.newamstar.com:8078/newstar/public/${url}" style="width: 100px;height: 100px;border:1px solid black"><div class="close" style="display: block">X</div></div>`);
                        
                   
                    }
                });
            //指定允许上传的文件类型
            // $('.upload').each(function(){
            //     let btn = $(this);  //点击按钮对象
            //     //console.log(btn[0].src);
            //     //return false;
            //     let uploadInst = upload.render({
            //         //elem: this,
            //         elem: '#upload',
            //         multiple:true
            //         ,url: 'http://localhost/sh/public/uploadBpmPics'
            //         ,before: function(obj){
            //             //this.data={"username":"aaaaaaa","account":"123"}//携带动态参数
            //         }
            //         ,done: function(res, index, upload){
            //             // console.log(11111111111111111);
            //             // console.log(res);
            //             // console.log(22222222222222222);
            //             // let item = this.item;
            //             // btn.attr("src","http://localhost/sh/public/"+res.msg);
            //             // btn.siblings(".close").show();
            //             var url = res.msg;
            //             imgs.push(url);
            //             $('#imgList').append(`<div class="layui-upload-list"><img class="layui-upload-img upload demo1 d1"  name="pics"  src="http://localhost/sh/public/${url}" style="width: 100px;height: 100px;border:1px solid black"><div class="close" style="display: block">X</div></div>`);
            //         }
            //         //进度条
            //         ,progress: function(n, elem, e){
            //             $(".progress_line").show();
            //             element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
            //             if(n == 100){
            //                 $(".progress_line").hide();
            //                 //layer.msg('上传完毕', {icon: 1});
            //                 layer.msg('上传完毕', {
            //                     icon: 1,
            //                     time: 1 //2秒关闭（如果不配置，默认是3秒）
            //                 }, function(){
            //                     //do something
            //                 });
            //             }
            //         }
            //     });
            // })
        });

</script>
</body>
</html>



